<template>
  <div class="yxwl">
    <el-tabs
      class="wifitop"
      v-model="activeName"
      type="card"
      @tab-click="handleClick"
    >
      <!-- WiFi设置 -->
      <el-tab-pane label="WIFI设置" name="first">
        <!-- 左边 -->
        <div class="wifileft">
          <div class="wdi">
            <span class="wxsp" style="float: left">无线局域网</span>
            <!-- 开关 -->
            <span @click="wifiswitch" style="float: right; margin-right: 100px">
              <el-switch
                v-model="valueswi"
                @click="sss"
                class="wxswi"
              ></el-switch>
            </span>
          </div>
          <span @click="wifi_IP">
            <el-table
              v-if="wifishow"
              :data="wifidata"
              @row-click="handleRowClick"
              style="width: 100%; float: left; margin-top: 30px"
            >
              <template slot="empty">
                <i
                  class="el-icon-loading"
                  style="
                    display: block;
                    font-size: 40px;
                    margin-top: 20px;
                    color: #205ad2;
                  "
                ></i>
                正在搜索WIFI . . .
              </template>
              <el-table-column width="50">
                <template scope="scope"
                  ><i
                    v-if="scope.row.associated"
                    style="font-size: 22px; color: #205ad2; font-weight: bold"
                    class="el-icon-check"
                  ></i
                ></template>
              </el-table-column>
              <el-table-column width="35">
                <img
                  style="width: 26px; height: 24px"
                  src="../../assets/WIFI.png"
                />
              </el-table-column>
              <!-- wifi名称 -->
              <el-table-column prop="ssid" width="250"></el-table-column>
              <el-table-column align="left" prop="name" width="245">
                <i
                  style="
                    float: right;
                    font-size: 20px;
                    font-weight: bold;
                    margin-right: 100px;
                  "
                  class="el-icon-lock"
                ></i>
              </el-table-column>
            </el-table>
          </span>
        </div>
        <!-- 右边 -->
        <div
          v-if="wifiIP && wifishow && this.wifidata.length !== 0"
          class="wifiright"
        >
          <div>
            <el-form ref="form" :model="form" label-width="80px">
              <h4 style="line-height: 20px">WIFI设置</h4>
              <el-form-item
                prop="password"
                :rules="[{ required: true, message: '密码不能为空' }]"
                label="密码"
              >
                <el-input
                  :disabled="cipher"
                  type="password"
                  v-model="form.region"
                  placeholder="请输入WiFi密码"
                ></el-input>
              </el-form-item>
              <h4 style="line-height: 20px; color: #27292e">高级设置</h4>
              <!-- <el-form-item
                :rules="[{ required: true, message: '请选择模式' }]"
                label="WiFi模式:"
              >
                <el-select style="float: left; width: 100%" v-model="value">
                  <el-option
                    v-for="item in ipModeLs"
                    :key="item.ipCode"
                    :label="item.ipName"
                    :value="item.ipCode"
                  >
                  </el-option>
                </el-select>
              </el-form-item> -->
            </el-form>
          </div>
          <div style="margin: 0 -30px; background-color: #edff33">
            <el-table :data="wifiList">
              <el-table-column prop="name" width="100"></el-table-column>
              <el-table-column width="440">
                <template scope="scope">
                  <el-select
                    style="width: 100%"
                    v-model="scope.row.value"
                    placeholder="请选择"
                    v-if="scope.row.code == 0"
                  >
                    <el-option
                      v-for="item in ipModeLs"
                      :key="item.ipCode"
                      :label="item.ipName"
                      :value="item.ipCode"
                    >
                    </el-option>
                  </el-select>
                  <el-input
                    v-model="scope.row.value"
                    :disabled="
                      wifiList[0].value == 'dhcp' || wifi1[0].isOn == false
                    "
                    v-else
                    placeholder="请输入..."
                  ></el-input>
                </template>
              </el-table-column>
            </el-table>
          </div>
          <el-button
            style="position: fixed; right: 200px; bottom: 220px"
            type="primary"
            @click="setNetConfig"
            >确 定</el-button
          >
          <el-button
            v-show="cipher"
            style="position: fixed; right: 300px; bottom: 220px"
            type="danger"
            @click="disconnect"
            >断 开</el-button
          >
        </div>
      </el-tab-pane>
      <!-- 有线网络 -->
      <el-tab-pane style="float: left" label="有线网络" name="second">
        <h4 style="line-height: 20px">有线网络设置</h4>
        <!-- <div style="margin-left: 67px">模式：</div> -->
        <div class="yxdiv">
          <el-table :data="MbpsList">
            <el-table-column prop="name" width="110"></el-table-column>
            <el-table-column width="380">
              <template scope="scope">
                <el-select
                  v-if="scope.row.code == 0"
                  v-model="scope.row.value"
                  placeholder="请选择"
                  class="jtip"
                >
                  <el-option
                    v-for="item in ipModeLs"
                    :key="item.ipCode"
                    :label="item.ipName"
                    :value="item.ipCode"
                  >
                  </el-option>
                </el-select>
                <el-input
                  :disabled="MbpsList[0].value == 'dhcp'"
                  v-model="scope.row.value"
                  v-else
                  placeholder="请输入..."
                ></el-input>
              </template>
            </el-table-column>
          </el-table>
          <el-button
            @click="setNetConfig1"
            style="margin-top: 20px; float: right"
            type="primary"
            >确 定</el-button
          >
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
import Api from "@/api/api";

export default {
  data() {
    return {
      // localSid: localStorage.getItem("sid"),
      localSid: "577688740d9d258b92c61e6b1f5498ff",
      activeName: "first",
      wifi1: [{ isOn: true }],
      MbpsList: [
        { name: "模式:", value: "dhcp", code: 0 },
        {
          name: "IP地址:",
          value: "000.000.000.000",
          code: 1,
        },
        {
          name: "子网掩码:",
          value: "000.000.000.000",
          code: 2,
        },
        {
          name: "网关:",
          value: "000.000.000.000",
          code: 3,
        },
        {
          name: "DNS服务器:",
          value: "000.000.000.000",
          code: 4,
        },
      ],
      wifiList: [
        { name: "模式:", value: "dhcp", code: 0 },
        {
          name: "IP地址:",
          value: "000.000.000.000",
          code: 1,
        },
        {
          name: "子网掩码:",
          value: "000.000.000.000",
          code: 2,
        },
        {
          name: "网关:",
          value: "000.000.000.000",
          code: 3,
        },
        {
          name: "DNS服务器:",
          value: "000.000.000.000",
          code: 4,
        },
      ],
      ipModeLs: [
        {
          ipName: "动态IP",
          ipCode: "dhcp",
        },
        {
          ipName: "静态IP",
          ipCode: "static",
        },
      ],
      wifishow: true,
      isSelect: true,
      wifiIP: false,
      cipher: true,
      input1: "flash",
      wifidata: [],

      tableData: [
        {
          date: "Hirinksamrt_2.4G",
        },
        {
          date: "Hirinksamrt_2.4G",
        },
        {
          date: "Hirinksamrt_2.4G",
        },
        {
          date: "Hirinksamrt_2.4G",
        },
      ],
      //   {
      //     date: "IP地址:",
      //   },
      //   {
      //     date: "子网掩码:",
      //   },
      //   {
      //     date: "网关:",
      //   },
      //   {
      //     date: "DNS服务器:",
      //   },
      // ],
      valueswi: true,
      form: {
        name: "",
        region: "",
      },
    };
  },
  async created() {
    let res = await Api.get_network_info({
      params: { sid: this.localSid },
    });
    let isWifiOn = await Api.is_wifi_enable({
      params: { sid: this.localSid },
    });
    this.wifi1[0].isOn = isWifiOn.result.wifi_enable;
    this.MbpsList[0].value = res.result.intfs[0].type;
    this.MbpsList[1].value = res.result.intfs[0].ip;
    this.MbpsList[2].value = res.result.intfs[0].mask;
    this.MbpsList[3].value = res.result.intfs[0].gateway;
    this.MbpsList[4].value = res.result.intfs[0].dns;
    this.wifiList[0].value = res.result.intfs[1].type;
    this.wifiList[1].value = res.result.intfs[1].ip;
    this.wifiList[2].value = res.result.intfs[1].mask;
    this.wifiList[3].value = res.result.intfs[1].gateway;
    this.wifiList[4].value = res.result.intfs[1].dns;
    await this.scanWifi();
  },
  methods: {
    wifiswitch() {
      this.wifishow = !this.wifishow;
    },
    wifi_IP() {
      // this.wifiIP = true;
      this.wifiIP = !this.wifiIP;
    },
    sss() {
      this.reload();
    },
    // 无线网络修改
    async setNetConfig1() {
      this.$message({
        showClose: true,
        type: "success",
        message: "设置成功",
      });
    },
    // 有线网络修改
    async setNetConfig() {
      if (this.cipher == true) {
        let intfs = [
          {
            name: "eth0",
            type: "",
          },
          { name: "wlan0", type: "" },
        ];
        intfs[0].type = this.MbpsList[0].value;
        intfs[1].type = this.wifiList[0].value;
        if (intfs[0].type == "static") {
          intfs[0].ip = this.MbpsList[1].value;
          intfs[0].mask = this.MbpsList[2].value;
          intfs[0].gateway = this.MbpsList[3].value;
          intfs[0].dns = this.MbpsList[4].value;
          intfs[0].dns1 = "4.4.4.4";
        } else if (intfs[1].type == "static") {
          intfs[1].ip = this.wifiList[1].value;
          intfs[1].mask = this.wifiList[2].value;
          intfs[1].gateway = this.wifiList[3].value;
          intfs[1].dns = this.wifiList[4].value;
          intfs[1].dns1 = "4.4.4.4";
        }
        // let infts = [];
        await Api.set_network_infos({
          params: { sid: this.localSid, intfs },
        });
        this.$message({
          showClose: true,
          type: "success",
          message: "设置成功",
        });
      }
      // 无线网络连接
      else {
        let res = await Api.connect_wifi({
          params: {
            sid: this.localSid,
            ssid: this.form.name,
            psk: this.form.region,
          },
        });
        if (res.result.succeed) {
          this.$message({
            showClose: true,
            type: "success",
            message: "连接成功",
          });
          this.wifi = [];
          setTimeout(async () => {
            await this.refreshWifi();
          }, 1500);
        } else {
          this.$message({
            showClose: true,
            type: "error",
            message: "密码错误，请检查重试",
          });
        }
      }
    },
    // 断开WiFi连接
    async disconnect() {
      this.$confirm("您确定要断开名为" + this.form.name + "的WiFi吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          Api.disconnect_wifi({ params: { sid: this.localSid } });
          this.$message({
            showClose: true,
            type: "success",
            message: "WIFI已断开",
          });
          this.refreshWifi();
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消断开",
          });
        });
    },
    // 连接成功过后更新列表
    refreshWifi() {
      this.wifi = [];
      this.scanWifi();
    },
    async scanWifi() {
      let res = await Api.scan_wifi({ params: { sid: this.localSid } });
      if (res.result.ap_list[0] != undefined) {
        this.wifidata = res.result.ap_list.sort((a, b) => {
          return b.associated - a.associated;
        });
        console.log("WiFi名称在此", this.wifidata);
      } else {
        await this.scanWifi();
      }
      // console.log("WiFi名称在此", this.wifidata);
    },
    handleRowClick(row) {
      console.log("这一行的数据为:", row);
      this.cipher = row.associated;
      this.form.name = row.ssid;
      // console.log("这一列的数据为:", column);
      // console.log("点击事件对象为:", event);
      // 在此处添加你想要的可带参的点击事件代码
    },

    handleClick(tab, event) {
      console.log(tab, event);
    },
  },
};
</script>
<style lang="scss" scoped>
.yxwl {
  width: 100%;
  height: calc(100vh - 80px);
  margin-left: 80px;
}
::v-deep .is-active {
  text-align: right;
  color: aliceblue;
  background: #2559c0 !important;
  border-radius: 1px !important;
}
::v-deep .el-table th.el-table__cell {
  display: none;
}
::v-deep .el-table__cell {
  text-align: right !important;
}
// .yxdiv {
//   text-align: right;
// }
::v-deep .el-input__inner {
  // background-color: #d6d6d6;
  // border: none;
  outline: none;
  box-shadow: none;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
.jtip {
  width: 360px;
}

.wifiright {
  width: 500px;
  height: 500px;
  float: right;
  margin-right: 180px;
}
.wifileft {
  width: 580px;
  float: left;

  ::v-deep .el-table__cell {
    text-align: left !important;
  }
}
.wxsp {
  font-weight: 800;
}
</style>
